<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Color 色彩 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.7b4fbe45.css" as="style"><link rel="preload" href="/my/assets/js/app.7d5cd858.js" as="script"><link rel="preload" href="/my/assets/js/561.c5708d9e.js" as="script"><link rel="preload" href="/my/assets/js/1489.a4c64293.js" as="script"><link rel="preload" href="/my/assets/js/930.2b474ab7.js" as="script"><link rel="preload" href="/my/assets/js/932.a28eb4e2.js" as="script"><link rel="preload" href="/my/assets/js/931.7953dce1.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.7b4fbe45.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/dv/" class="nav-link">
  大屏
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/dv.html" class="nav-link">
  可视化大屏
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Basic</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my/element/border.html" class="sidebar-link">Border 边框</a></li><li><a href="/my/element/button.html" class="sidebar-link">Button 按钮</a></li><li><a href="/my/element/color.html" aria-current="page" class="active sidebar-link">Color 色彩</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/element/color.html#主色" class="sidebar-link">主色</a></li><li class="sidebar-sub-header"><a href="/my/element/color.html#辅助色" class="sidebar-link">辅助色</a></li><li class="sidebar-sub-header"><a href="/my/element/color.html#中性色" class="sidebar-link">中性色</a></li></ul></li><li><a href="/my/element/container.html" class="sidebar-link">Container 布局容器</a></li><li><a href="/my/element/icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="/my/element/layout.html" class="sidebar-link">Layout 布局</a></li><li><a href="/my/element/link.html" class="sidebar-link">Link 文字链接</a></li><li><a href="/my/element/typography.html" class="sidebar-link">Typography 字体</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Form</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Data</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Notice</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Navigation</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Others</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="color-色彩"><a href="#color-色彩" class="header-anchor">#</a> Color 色彩</h1> <p>Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。</p> <h2 id="主色"><a href="#主色" class="header-anchor">#</a> 主色</h2> <p>Element 主要品牌颜色是鲜艳、友好的蓝色。
<div class="el-row" style="margin-left:-6px;margin-right:-6px;" data-v-11d8de46><div class="el-col el-col-10 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-11d8de46><div class="demo-color-box" style="background:#409EFF;" data-v-11d8de46>Brand Color
      <div class="value" data-v-11d8de46>#409EFF</div> <div class="bg-color-sub" style="background:#ecf5ff;" data-v-11d8de46><div class="bg-blue-sub-item" style="background:#53a8ff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#66b1ff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#79bbff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#8cc5ff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#a0cfff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#b3d8ff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#c6e2ff;" data-v-11d8de46></div><div class="bg-blue-sub-item" style="background:#d9ecff;" data-v-11d8de46></div></div></div></div></div></p> <h2 id="辅助色"><a href="#辅助色" class="header-anchor">#</a> 辅助色</h2> <p>除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
<div class="el-row" style="margin-left:-6px;margin-right:-6px;" data-v-6cf4a72c><div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-6cf4a72c><div class="demo-color-box" style="background:#67C23A;" data-v-6cf4a72c>Success
      <div class="value" data-v-6cf4a72c>#67C23A</div> <div class="bg-color-sub" data-v-6cf4a72c><div class="bg-success-sub-item" style="background:#e1f3d8;" data-v-6cf4a72c></div><div class="bg-success-sub-item" style="background:#f0f9eb;" data-v-6cf4a72c></div></div></div></div> <div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-6cf4a72c><div class="demo-color-box" style="background:#E6A23C;" data-v-6cf4a72c>Warning
      <div class="value" data-v-6cf4a72c>#E6A23C</div> <div class="bg-color-sub" data-v-6cf4a72c><div class="bg-success-sub-item" style="background:#faecd8;" data-v-6cf4a72c></div><div class="bg-success-sub-item" style="background:#fdf6ec;" data-v-6cf4a72c></div></div></div></div> <div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-6cf4a72c><div class="demo-color-box" style="background:#F56C6C;" data-v-6cf4a72c>Danger
      <div class="value" data-v-6cf4a72c>#F56C6C</div> <div class="bg-color-sub" data-v-6cf4a72c><div class="bg-success-sub-item" style="background:#fde2e2;" data-v-6cf4a72c></div><div class="bg-success-sub-item" style="background:#fef0f0;" data-v-6cf4a72c></div></div></div></div> <div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-6cf4a72c><div class="demo-color-box" style="background:#909399;" data-v-6cf4a72c>Info
      <div class="value" data-v-6cf4a72c>#909399</div> <div class="bg-color-sub" data-v-6cf4a72c><div class="bg-success-sub-item" style="background:#e9e9eb;" data-v-6cf4a72c></div><div class="bg-success-sub-item" style="background:#f4f4f5;" data-v-6cf4a72c></div></div></div></div></div></p> <h2 id="中性色"><a href="#中性色" class="header-anchor">#</a> 中性色</h2> <p>中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
<div class="el-row" style="margin-left:-6px;margin-right:-6px;" data-v-49056179><div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-49056179><div class="demo-color-box-group" data-v-49056179><div class="demo-color-box demo-color-box-other" style="background:#303133;" data-v-49056179>主要文字
        <div class="value" data-v-49056179>#303133</div></div> <div class="demo-color-box demo-color-box-other" style="background:#606266;" data-v-49056179>
        常规文字
        <div class="value" data-v-49056179>#606266</div></div> <div class="demo-color-box demo-color-box-other" style="background:#909399;" data-v-49056179>次要文字
        <div class="value" data-v-49056179>#909399</div></div> <div class="demo-color-box demo-color-box-other" style="background:#C0C4CC;" data-v-49056179>占位文字
        <div class="value" data-v-49056179>#C0C4CC</div></div></div></div> <div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-49056179><div class="demo-color-box-group" data-v-49056179><div class="demo-color-box demo-color-box-other demo-color-box-lite" style="background:#DCDFE6;" data-v-49056179>一级边框
        <div class="value" data-v-49056179>#DCDFE6</div></div> <div class="demo-color-box demo-color-box-other demo-color-box-lite" style="background:#E4E7ED;" data-v-49056179>二级边框
        <div class="value" data-v-49056179>#E4E7ED</div></div> <div class="demo-color-box demo-color-box-other demo-color-box-lite" style="background:#EBEEF5;" data-v-49056179>三级边框
        <div class="value" data-v-49056179>#EBEEF5</div></div> <div class="demo-color-box demo-color-box-other demo-color-box-lite" style="background:#F2F6FC;" data-v-49056179>四级边框
        <div class="value" data-v-49056179>#F2F6FC</div></div></div></div> <div class="el-col el-col-6 el-col-xs-12" style="padding-left:6px;padding-right:6px;" data-v-49056179><div class="demo-color-box-group" data-v-49056179><div class="demo-color-box demo-color-box-other" style="background:#000000;" data-v-49056179>基础黑色
        <div class="value" data-v-49056179>#000000</div></div> <div class="demo-color-box demo-color-box-other" style="background:#FFFFFF;color:#303133;border:1px solid #eee;" data-v-49056179>基础白色
        <div class="value" data-v-49056179>#FFFFFF</div></div> <div class="demo-color-box demo-color-box-other bg-transparent" data-v-49056179>透明
        <div class="value" data-v-49056179>Transparent</div></div></div></div></div></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/element/button.html" class="prev">
        Button 按钮
      </a></span> <span class="next"><a href="/my/element/container.html">
        Container 布局容器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.7d5cd858.js" defer></script><script src="/my/assets/js/561.c5708d9e.js" defer></script><script src="/my/assets/js/1489.a4c64293.js" defer></script><script src="/my/assets/js/930.2b474ab7.js" defer></script><script src="/my/assets/js/932.a28eb4e2.js" defer></script><script src="/my/assets/js/931.7953dce1.js" defer></script>
  </body>
</html>
